refactor: add custom properties for color variants & fix: center slider vertically across size variants#6
Merged
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
WalkthroughThis PR centralizes toggle button theme colors into CSS custom properties ( ChangesTheme Colors and Readonly Slider Fixes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-project-automation
Bot
moved this from To Do
to Pending release
in Flowing Code Addons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary of PR contents:
Issue #3:
The Base theme in Vaadin is intentionally colorless — it's a structural-only foundation meant for developers who want to build their own visual design from scratch. When a user picks Base theme, they're explicitly opting out of preset colors. Silently injecting hardcoded fallback colors would work against that decision.
Instead, the component now declares
--toggle-button-*tokens in :host that default to Lumo/Aura variables. This makes the color API explicit: on Lumo/Aura the tokens resolve automatically; on Base theme, variants render without color by design, and users fix it with a single CSS variable like--toggle-button-success-color: greenrather than having to know which internal theme variable to override.Issue #5:
A fix to enter slider vertically across size variants. The 1px dashed readonly border reduced inner height by 2px but slider top was hardcoded to 1px for all sizes. Changed base top/left to 2px and added overrides: 1px for small, 3px for large. Selectors also apply correctly to longswipe variants.
New demo view:
New ToggleButtonReadOnlyDemo tab to demostrate readonly behavior when combined with the different variants. Covers sizes, long-swipe, and color variants,each in checked and unchecked states. It's a visual regression coverage for both fixes above.
Tested locally in for both Vaadin 24 & Vaadin 25 profiles.
Close #3 & Close #5
Summary by CodeRabbit
Style
Documentation